﻿<link href="~/css/site.css" rel="stylesheet" />
<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js">    </script>
<div id="app">
    <el-row>
        <el-col :span="24">
            您正在做的业务是：人力资源--权限管理--添加角色
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="text-align: right">
            <el-button type="primary" v-on:click="Xg()">提交</el-button>
            <el-button v-on:click="Fh()">返回</el-button>
        </el-col>
    </el-row>
    <el-row style="height: 10px"></el-row>
    <el-row style="text-indent: 10px">
        <el-col :span="6" style="border: 1px solid black; background-color: #ffd553;">
            角色编号
        </el-col>
        <el-col :span="6" style="border: 1px solid black;">
            <el-input v-model="role.RolesID" size="small" style="width: 250px;" readonly/>
        </el-col>
        <el-col :span="6" style="border: 1px solid black; background-color: #ffd553;">
            角色名称
        </el-col>
        <el-col :span="6" style="border: 1px solid black;">
            <el-input v-model="role.RolesName" size="small" style="width: 250px;" />
        </el-col>
        <el-col :span="6" style="border: 1px solid black; background-color: #ffd553;">
            角色说明
        </el-col>
        <el-col :span="6" style="border: 1px solid black;">
            <el-input v-model="role.RolesInstruction" size="small" style="width: 250px;" />
        </el-col>
        <el-col :span="6" style="border: 1px solid black; background-color: #ffd553;">
            角色是否可用
        </el-col>
        <el-col :span="6" style="border: 1px solid black;">
            <el-select v-model="role.RolesIf" size="small" style="width: 250px;" placeholder="请选择">
                <el-option label="true" value="true">true</el-option>
                <el-option label="false" value="false">false</el-option>
            </el-select>
        </el-col>
        <el-tree style="background-color: transparent"
                 :data="data"
                 default-expand-all
                 accordion
                 ref="refs"
                 show-checkbox
                 node-key="juriID"
                 :default-checked-keys.sync="defualtkeys"
                 :props="defaultProps"
                 v-on:check="Getid">
        </el-tree>
    </el-row>
</div>

<script type="text/javascript">
    const { createApp, ref, reactive } = Vue
    const { ElMessage } = ElementPlus
    var app = createApp({
        setup() {
            const role = reactive({
                RolesID: null,
                RolesName: null,
                RolesInstruction: null,
                RolesIf: null,
            })
            const refs = ref()
            const data = ref([])
            const defualtkeys = ref([])
            const defualtkeys2 = ref([])
            const defaultProps = reactive({
                label: "jurName",
                children: "children"
            })
            function Show() {
                axios.get("/Roles/GetRole")
                    .then(res => {
                        role.RolesID = res.data.rolesID
                        role.RolesName = res.data.rolesName
                        role.RolesInstruction = res.data.rolesInstruction
                        role.RolesIf = res.data.rolesIf
                    })
                    .catch(err => {
                        console.log(err);
                    })
                axios.get("/Roles/GetQX")
                    .then(res => {
                        data.value = res.data
                        console.info(res.data)
                    })
                    .catch(err => {
                        console.log(err);
                    })
                axios.get("/Roles/GetQXById")
                    .then(res => {
                        defualtkeys.value = res.data
                        console.log(defualtkeys.value)
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
            function Getid() {
                //获取全选
                defualtkeys.value = refs.value.getCheckedKeys()
                //获取半选
                defualtkeys2.value = refs.value.getHalfCheckedKeys()
                console.log(defualtkeys.value)
                console.log(defualtkeys2.value)
            }
            function Xg() {
                axios.delete("/Roles/Delete", {
                    params: {
                        id: role.RolesID
                    }
                })
                    .then(res => {
                        for (var i = 0; i < defualtkeys.value.length; i++) {
                            axios.post("/Roles/Add", null, {
                                params: {
                                    id: role.RolesID,
                                    id2: defualtkeys.value[i]
                                }
                            })
                        }
                        for (var j = 0; j < defualtkeys2.value.length; j++) {
                            axios.post("/Roles/Add", null, {
                                params: {
                                    id: role.RolesID,
                                    id2: defualtkeys2.value[j]
                                }
                            })
                        }
                        ElMessage({
                        type: 'success',
                        message: '修改成功！'});
                        setTimeout(wait2Seconds, 1000);
                    })
                    .catch(err => {
                        console.log(err);
                    })

                axios.put("/Roles/RolesUpdate",{
                    roles:role
                },{
                    headers: {
                      "Content-type": "application/x-www-form-urlencoded",
                      //或其他格式
                    },
                }).then(res=>{

                }).catch(Error=>{
                    console.info(Error)
                })
            }
            function wait2Seconds() {
                window.location.href = "/Roles/Index"
            }
            function Fh() {
                window.history.back()
            }
            Show()
            return {
                role,
                data,
                refs,
                defualtkeys,
                defualtkeys2,
                defaultProps,
                Xg,
                Fh,
                Show,
                Getid,
            }
        }
    })
    app.use(ElementPlus)
    app.mount('#app')
</script>

<style scoped>
    body {
        background-color: #ffffcc;
    }
</style>
